<template>
  <div class="home4">
    <p>{{this.$route.params.id}}</p>
    <img src="./image/tupian@3x.png" @click="clickImg($event)">
    <img src="./image/tupian10@2x.png" @click="clickImg($event)">

    <!--遮罩层-->
    <big-img v-show="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
  </div>
</template>
<style lang="scss">
  .home4 {
    width: 100%;
    background: red;
    margin-top: 50px;
    img {
      width: 100px;
      height: 100px;
    }
  }
</style>
<script>
  import BigImg from './BigImg.vue';

  export default {
    name: 'Home4',
    data() {
      return {
        showImg: false,
        imgSrc: ''
      }
    },
    components: {
      'big-img': BigImg
    },
    methods: {
      clickImg(e) {
        this.showImg = true;
        this.imgSrc = e.currentTarget.src;  // 事件属性返回其监听器触发事件的节点
      },
      viewImg() {
        this.showImg = false   // 默认时候的为false
      }
    },
    created() {
    }

  }
</script>
